<!-- 逻辑 -->
<script setup lang="ts">
// 定义数据
const info = '么么哒'
const htmlStr = '<button>点我试试</button>'
</script>

<!-- 结构 -->
<template>
<!-- 普通文本, v-html, v-text 没有区别 -->
<p v-text="info"></p>
<p v-html="info"></p>
<!-- 针对 html 标签如果要解析, 需要 v-html -->
<p v-text="htmlStr"></p>
<p v-html="htmlStr"></p>

<!-- 无论是 v-html 还是 v-text 都会覆盖 标签中子元素(内容会被替换) -->
<!-- 不希望替换标签的内容, 推荐使用 插值表达式, 但 html 并不会解析 -->
<p>左边的内容 {{ htmlStr }} 右边的内容</p>
</template>

<!-- 样式 -->
<style scoped>

</style>